<template>
    <div id="dialog">
        <el-dialog
            :title="DialogData.title"
            :visible.sync="DialogData.show"
            width="60%"
            >
                <div class="form">

                    <el-form :model="FormData" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="权限分组">
                              <el-select v-model="FormData.role_id" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="ID" prop="username" v-if="DialogData.edit">
                            <el-input v-model="FormData.userid" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="账户" prop="username">
                            <el-input v-model.number="FormData.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input  v-model="FormData.password" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass" v-if="DialogData.add">
                            <el-input  v-model="FormData.checkPass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="状态">
                              <el-select v-model="FormData.status" placeholder="请选择">
                                    <el-option
                                    v-for="item in status"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                        </el-form-item>
                        </el-form>

                </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="DialogData.show = false">取 消</el-button>
                <el-button type="primary" @click="SubForm">确 定</el-button>
            </span>
            </el-dialog>
    </div>
</template>

<script>
    export default {
        props: {
            DialogData: Object,
            FormData: Object,
        },
        data() {
            return {
                options: [],
                status: [
                    { value:1, label: "开启"},
                    { value:2, label: "隐藏"}
                ]
            }
        },
        computed: {
            token() {
                return localStorage.token;
            }
        },
        created () {
            this.getQuan();
        },
        methods: {
            //  提交表单
            async SubForm() {
                this.FormData.token = this.token
                if (this.DialogData.add) {
                    let { role_id, username, password, status , checkPass } = this.FormData
                    if (!role_id) {
                        this.$message.error("请选择权限分类")
                        return false
                    } else if(!username){
                        this.$message.error("请选择用户名")
                        return false
                    } else if(!password){
                        this.$message.error("请选择密码")
                        return false
                    } else if(password != checkPass){
                        this.$message.error("两次输入的密码不一致")
                        return false
                    }
                } 
                let res =await this.$axios.post("/admin/role/adminalter", this.FormData)
                console.log(res);
                let code = res.data.code
                if(code == 202 || code == 204) {
                    this.$message.success("更新成功")
                    this.$emit("update")
                    this.DialogData.show = false
                } else {
                    this.$message.success("更新失败")
                    this.$emit("update")
                    this.DialogData.show = false
                }
                
            },
            // 获取所有权限
            async getQuan() {
                let res = await  this.$axios.post("/admin/role/auth_groupshow", { token: this.token })
                // console.log(res);
                
                let data = res.data.data
                if (data) {
                    data.forEach(el => {
                        this.options.push({
                            value: el.id,
                            label: el.name
                        })
                    });
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>